/**
 * Created by SylarSong on 16/12/7.
 */

$(document).ready(function () {
    $('#line-bar-player-area').width($(".grid-6") - 50);
    line_bar_player_area.resize();
    get_line_bar_player_area();
});

//************获取上一个月***************
function getPreMonth(date) {
    /**
     * @param: data    例如  new Date()
     * @param: return  时间戳  例如  new Date().getTime()
     * **/
    if(!date)date=new Date();
    var year = date.getFullYear(); //获取当前日期的年份
    var month = date.getMonth(); //获取当前日期的月份
    var day = date.getDate(); //获取当前日期的日
    var oneDay = 1000*3600*24*1;
    var days = new Date(year, month, 0).getDate(); //获取当前日期中月的天数
    var current_time = date.getTime();
    var after_time = current_time-(oneDay*days);
    return after_time;
}
//************获取图标实例******************
var line_bar_player_area = echarts.init($('#line-bar-player-area')[0]); // 次日留存率+新增用户数
var line_chart_retention_3= echarts.init($('#line-chart-retention-3')[0]); //3日留存
var line_chart_retention_7= echarts.init($('#line-chart-retention-7')[0]); //7日留存
var line_chart_retention_30= echarts.init($('#line-chart-retention-30')[0]); //30日留存

//*次日留存+新增用户********************************************
function get_line_bar_player_area() {
    option = {
        title: {
            text: '近7日数据',
            subtext: '!'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['次日留存率', '新增用户数']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: (function () {
                    var now = new Date();
                    var res = [];
                    var len = 7;
                    while (len--) {
                        res.unshift([now.getMonth(), now.getDate() - len].join('/'));
                        now = new Date(now - 2000);
                    }
                    return res;
                })()
            },
            {
                type: 'category',
                boundaryGap: true,
                data: (function () {
                    var res = [];
                    var len = 7;
                    while (len--) {
                        res.push(len + 1);
                    }
                    return res;
                })()
            }
        ],
        yAxis: [
            {
                type: 'value',
                scale: true,
                name: '%',
                max: 100,
                min: 0,
                data: [1, 2, 3, 3, 4, 5, 6, 7],
                axisLabel: {
                  show: true,
                  interval: 'auto',
                  formatter: '{value} %'
                }
            },
            {
                type: 'value',
                scale: true,
                name: '预购量',
            }
        ],
        series: [
            {
                name: '新增用户数',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: (function () {
                    var res = [];
                    var len = 7;
                    while (len--) {
                        res.push(Math.round(Math.random() * 1000));
                    }
                    return res;
                })()
            },
            {
                name: '次日留存率',
                type: 'line',
                data: (function () {
                    var res = [];
                    var len = 0;
                    while (len < 7) {
                        res.push((Math.random()*100));
                        len++;
                    }
                    return res;
                })()
            }
        ]
    };
    line_bar_player_area.setOption(option);
}

//*3日留存********************************************
function get_retention_3() {
    var date = [];
    var now = (new Date()).getTime();
    console.log(new Date(now));
    console.log(new Date(now).getDate());
    var threeDay = 3600*24*1000*3;
    for(var i=0;i<10;i++){
        date.push([(new Date(now)).getMonth()+1, (new Date(now)).getDate()].join("-"));
        now-=threeDay;
    }
    var data = [];
    for(var i=0;i<10;i++){
        data.push(Math.floor(Math.random()*50+50));
    }
    option = {
        title: {
            text: '3日留存'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['3日留存率']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date.reverse()
        },
        yAxis: {
            type: 'value',
            max:100,
            min:0,
            axisLabel: {
                  show: true,
                  interval: 'auto',
                  formatter: '{value} %'
                }
        },
        series: [
            {
                name: '留存率',
                type: 'line',
                stack: '总量',
                data: data
            }
        ]
    };

    line_chart_retention_3.setOption(option);
}
//*7日留存********************************************
function get_retention_7() {
    var date = [];
    var now = (new Date()).getTime();
    console.log(new Date(now));
    console.log(new Date(now).getDate());
    var sevenDay = 3600*24*1000*7;
    for(var i=0;i<10;i++){
        date.push([(new Date(now)).getMonth()+1, (new Date(now)).getDate()].join("-"));
        now-=sevenDay;
    }
    var data = [];
    for(var i=0;i<10;i++){
        data.push(Math.floor(Math.random()*100));
    }
    option = {
        title: {
            text: '7日留存'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['7日留存率']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date.reverse()
        },
        yAxis: {
            type: 'value',
            max:100,
            min:0,
            axisLabel: {
                  show: true,
                  interval: 'auto',
                  formatter: '{value} %'
                }
        },
        series: [
            {
                name: '留存率',
                type: 'line',
                stack: '总量',
                data: data
            }
        ]
    };

    line_chart_retention_7.setOption(option);
}
//*30日留存********************************************
function get_retention_30() {
    var date = [];
    var now = (new Date()).getTime();
    console.log(new Date(now));
    console.log(new Date(now).getDate());
    var oneDay = 3600*24*1000*30;
    for(var i=0;i<10;i++){
        date.push([(new Date(now)).getMonth()+1, (new Date(now)).getDate()].join("-"));
        now= getPreMonth(new Date(now));
    }
    var data = [];
    for(var i=0;i<10;i++){
        data.push(Math.floor(Math.random()*50));
    }
    option = {
        title: {
            text: '30日留存'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['30日留存率']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date.reverse()
        },
        yAxis: {
            type: 'value',
            max:100,
            min:0,
            axisLabel: {
                  show: true,
                  interval: 'auto',
                  formatter: '{value} %'
                }
        },
        series: [
            {
                name: '留存率',
                type: 'line',
                stack: '总量',
                data: data,
            }
        ]
    };

    line_chart_retention_30.setOption(option);
}


window.onresize = function () {
    $('#line-bar-player-area').width($(".grid-6") - 50);
    line_bar_player_area.resize();
    get_line_bar_player_area();
    get_retention_3();
    get_retention_7();
    get_retention_30();
};

